<template>
	<view>
		<u-image width="100%" mode="widthFix" src="https://tuyun.ybxin.net/tuyunwx/20230920191002.jpg"></u-image>
		<view class="list">
			<view class="item" v-for="(item , i) in serviceList" :key="i">
				<view class="inner">
					<view class="content" @click="toDetail(item)">
						<image class="cover-image" mode="aspectFit" :src="item.icon"></image>
						<view class="intro">
							<view class="title">{{item.serviceName}}</view>
							<view class="desc text-969799">{{item.subtitle||""}}</view>
							<view class="price">
								<text class="text-ed4124 text-12"> ￥ </text>
								<text class="text-ed4124">{{item.price}}</text>
								<!-- <text class="text-969799 text-12"> / {{item.unit}}</text> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
 
<script>
	import {
		getServiceCategoryList
	} from '@/apis/request.js';
	
	export default {
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {
				city: {
					id: 350200
					// title: '厦门市'
				},
				serviceList: [], //右侧服务列表
				channel: ''
			}
		},
		onLoad() {
			var launchOptions = uni.getLaunchOptionsSync()
			var extraData = launchOptions.referrerInfo.extraData || {}
			this.channel = extraData?.channel || launchOptions?.query?.channel
			if(this.channel) {
				uni.setStorageSync('city', {
					id: extraData.city_id || 350200,
					title: extraData.city_name || '厦门市'
				})
			}
			
			this.city = uni.getStorageSync('city');
			this.getServiceList();
		},
		methods: {
			getServiceList() {
				getServiceCategoryList({
					cityId: this.city.id,
					level: 1
				}).then(arr => {
					Promise.all(arr.map(o => {
						return new Promise((resolve, reject) => {
							getServiceCategoryList({
								cityId: this.city.id,
								level: 2,
								parentId: o.id,
								keywords: ""
							}).then(list => {
								resolve(list)
							});
						})
					})).then((results) => {
						results.forEach((list) => {
							list?.forEach((o) => {
								if (o.serviceItemsList) {
									this.serviceList.push(...o.serviceItemsList)
								}
							})
						})
					})
				});
			},
			toDetail(item) {
				uni.navigateTo({
					url: `/pages/servePages/serveDetail?id=${item.id}&channel=${this.channel || ''}`
				});
			}
		},
		onShareAppMessage() {
			const path = `pages/accompanyDiagnosis/index?channel=tljt`;
			return {
				title: "厦门地铁&微米陪诊",
				imageUrl: "https://tuyun.ybxin.net/tuyunwx/20230920191002.jpg",
				path: path
			};
		},
		onShareTimeline () {
			return {
				title: "厦门地铁&微米陪诊",
				imageUrl: "https://tuyun.ybxin.net/tuyunwx/20230920191002.jpg",
				query: `channel=tljt`
			};
		}
	}
</script>

<style lang="scss" scoped>
.list {
	display: flex;
	flex-wrap: wrap;
	background: #153a81;
	.item {
		width: 50%;
		.inner {
			padding: 5px;
			.content {
				border-radius: 10px;
				overflow: hidden;
				background: #fff;
				.cover-image {
					max-height: 150px;
					width: 100%;
				}
				.intro {
					padding: 10px;
					.title {
						margin-bottom: 8px;
						font-size: 16px;
						font-weight: 700;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.desc {
						min-height: 20px;
						margin-bottom: 8px;
						color: #969799;
						font-size: 14px;
						font-weight: 500;
						line-height: 20px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.price {
						text-align: right;
					}
				}
			}
		}
	}
}
.text-ed4124 {
	color: #ed4124;
}
.text-969799 {
	color: #969799;
}
.text-12 {
	font-size: 12px;
}
</style>
